<template>
  <div class="login">
    <!-- 1. 关闭图标 -->
    <span class="close-btn" @click="$router.back()">
      <i class="iconicon-test iconfont"></i>
    </span>
    <!-- 2. Logo 图标 -->
    <h2 class="logo">
      <i class="iconnew iconfont"></i>
    </h2>
    <!-- 3. 输入框 -->
    <MyInput
      v-model="user.username"
      placeholder="用户名/手机号"
      :rules="rules.username"
      msg="手机号输入不合法"
    ></MyInput>
    <MyInput
      v-model="user.password"
      placeholder="密码"
      type="password"
      :rules="rules.password"
      msg="密码为3-18位"
    ></MyInput>
    <!-- 4. 一个注册提示 -->
    <div class="tips">
      没有账号？<router-link to="/register" class="red">去注册</router-link>
    </div>
    <!-- 5. 登录按钮 -->
    <MyButton @click="BtnFn" type="danger"> 登录 </MyButton>
  </div>
</template>

<script>
// 自定义组件使用步骤：  新建/导入/注册/使用
import MyButton from "../components/MyButton.vue";
import MyInput from "../components/MyInput.vue";
import { userLoginApi } from "../apis/user";
import { setToken, setUserId } from "../utils/localData";
// import Vue from "vue";
// import { Toast } from "vant";
// Vue.use(Toast);
export default {
  data() {
    return {
      user: {
        // 为了方便测试，把用户名写到这里，注意，项目上线时，记得变回空字符串
        username: "13800000000",
        password: "123",
      },
      rules: {
        username: /^1\d{10}$|^[a-zA-Z]\w{2,10}$|^1\d{4,5}$/,
        password: /^[a-zA-Z0-9~!@#$%^&*()_+=]{3,18}$/,
      },
    };
  },
  methods: {
    BtnFn() {
      //   console.log("我点击了按钮", e);
      //   登录按钮点击时也需要用正则校验
      if (
        this.rules.username.test(this.user.username) &&
        this.rules.password.test(this.user.password)
      ) {
        //   校验按钮点击时也需要用正则校验
        userLoginApi({
          // 💥 请求接口参数的键名称，必须按接口文档要求来
          username: this.user.username,
          password: this.user.password,
        }).then((res) => {
          console.log(res);
          // res.data.message
          // res.data.data.token
          const { message } = res.data;
          if (message === "登录成功") {
            // 提取 token
            const { token } = res.data.data;
            // 保存到本地存储中，后续用户信息中心需要用到
            // localStorage.setItem("hmtt_token", token);
            // 调用封装后的 token 方法
            setToken(token);
            // 把用户 id 存储到本地
            setUserId(res.data.data.user.id);
            // 跳转到个人中心页，并传递 id 参数
            // console.log(res.data.data.user.id);
            const from = this.$route.params.from;
            console.log("从哪里进来的登录页", { from });
            // 如果有 from 表示从某个页面过来的
            if (from) {
              // 直接修改地址栏地址，去到某个页面
              location.href = from;
            } else {
              // 没有来源的页面，直接去个人中心
              this.$router.push({
                path: "/user",
                query: { id: res.data.data.user.id },
              });
            }
            // 成功提示 success()
            this.$toast.success(message);
          } else {
            // 失败提示 fail()
            this.$toast.fail("用户名或密码错误");
          }
        });
      } else {
        // alert("用户名或密码校验失败");
        this.$toast("用户名或密码校验失败");
      }
    },
    getValueFn(val) {
      // 把子组件里面的数据更新到父组件上
      this.user.username = val;
    },
  },
  components: {
    MyButton,
    MyInput,
  },
};
</script>

<style lang="less" scoped>
.close-btn {
  position: fixed;
  left: 20px;
  top: 20px;
  .iconfont {
    font-size: 20px;
    color: #666;
  }
}
.logo {
  display: flex;
  justify-content: center;
  padding: 60px 0 20px;
  .iconfont {
    color: #d81e06;
    font-size: 120px;
  }
}
.tips {
  padding: 0 30px;
  text-align: right;
}
.red {
  color: red;
}
</style>